<template>
    <div class="table-form">
        <div class="form" v-if="showSearchForm">
            <el-form class="common-form-inline" inline :model="form">
                <div>
                    <!-- 中间表单插槽区域 -->
                    <slot name="form-items"></slot>

                    <el-form-item>
                        <el-button type="primary" :icon="Search" @click="query" class="query-button">查询</el-button>
                        <el-button :icon="RefreshRight" @click="resetForm" class="reset-button">重置</el-button>
                    </el-form-item>
                </div>
            </el-form>
            <!-- 添加按钮插槽区域 -->
            <div class="f-mb-20" v-if="$slots['add-button']">
                <slot name="add-button" class="f-mb-20"></slot>
            </div>
        </div>

        <div class="table-container">
            <!-- 中间表格插槽区域 -->
            <slot name="table"></slot>
        </div>

        <div class="pagination-container" v-if="showPagination">
            <el-pagination background v-model:current-page="form.pageIndex" v-model:page-size="form.pageSize"
                :page-sizes="[10, 20, 50, 100]" :total="total" layout="total, sizes, prev, pager, next, jumper"
                @size-change="sizeChange" @current-change="currentChange" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, useSlots } from 'vue';
import { Search, RefreshRight } from '@element-plus/icons-vue';

interface FormType {
    pageIndex: number;
    pageSize: number;
    [key: string]: any;
}

const $slots = useSlots();

const props = defineProps({
    total: {
        type: Number,
        default: 0,
    },

    /**
     * 是否显示分页
     */
    showPagination: {
        type: Boolean,
        default: true,
    },

    /**
     * 是否显示搜索表单
     */
    showSearchForm: {
        type: Boolean,
        default: true,
    },

    /**
     * 初始表单数据
     */
    initialForm: {
        type: Object,
        default: () => ({
            pageIndex: 1,
            pageSize: 50,
        }),
    },
});

const emit = defineEmits(['query', 'reset', 'size-change', 'current-change']);

/**
 * 表单数据
 */
const form = ref<FormType>({
    pageIndex: props.initialForm.pageIndex || 1,
    pageSize: props.initialForm.pageSize || 50,
    ...props.initialForm,
});

/**
 * 总数
 */
const total = ref(props.total || 0);

/**
 * 页码变化
 * @param val 页码
 */
const currentChange = (val: number) => {
    form.value.pageIndex = val;
    emit('current-change', val);
    emit('query', form.value);
};

/**
 * 每页条数变化
 * @param val 每页条数
 */
const sizeChange = (val: number) => {
    form.value.pageSize = val;
    form.value.pageIndex = 1; // 重置页码
    emit('size-change', val);
    emit('query', form.value);
};

/**
 * 查询
 */
const query = () => {
    emit('query', form.value);
};

/**
 * 重置表单
 */
const resetForm = () => {
    form.value = {
        pageIndex: props.initialForm.pageIndex || 1,
        pageSize: props.initialForm.pageSize || 50,
        ...props.initialForm,
    };
    emit('reset', form.value);
};

/**
 * 更新表单数据
 * @param data 表单数据
 */
const updateForm = (data: Partial<FormType>) => {
    form.value = {
        ...form.value,
        ...data,
    };
};

/**
 * 更新总数
 * @param newTotal 新的总数
 */
const updateTotal = (newTotal: number) => {
    total.value = newTotal;
};

defineExpose({
    form,
    updateForm,
    query,
    resetForm,
    updateTotal,
});
</script>

<style scoped lang="scss">
.table-form {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    overflow: hidden;

    .form {
        flex-shrink: 0;
        // height: 124px;

        .el-form {
            width: 100%;
            display: flex;
            justify-content: space-between;
        }
    }

    .common-form-inline {
        // height: 72px;
        display: flex;
        align-items: center;
        // padding-top: 20px;
    }

    .table-container {
        flex: 1;
        position: relative;
        // min-height: 200px;
        min-height: 70px;
        overflow: visible;
        padding-bottom: 56px;
    }

    .pagination-container {
        flex-shrink: 0;
        position: absolute;
        padding-bottom: 10px;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60px;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        background-color: #fff;
        z-index: 1;
    }

    :deep(.el-pagination.is-background .el-pager li.is-active) {
        background-color: #fff;
        border: 1px solid #2258f6;
        color: #2258f6;
    }

    :deep(.el-pagination.is-background .el-pager li) {
        background-color: #f4f4f9;
        font-weight: bold;
        font-size: 14px;
        color: #9f9f9f;
    }

    .query-button {
        border-radius: 2px;
        /* 主色蓝 */
        background: #2258f6;
        color: #fff;
        margin: 0 20px;
        width: 84px;
        height: 32px;
    }

    .reset-button {
        background-color: #f5f7fa;
        border-color: #f5f7fa;
        color: #2a2a2a;
        width: 84px;
        height: 32px;
    }
}

:deep(.el-form--inline .el-form-item) {
    margin-right: 20px;
}

.table-form .form .el-form {
    padding: 20px 0 10px 0;
}
</style>
